<template>
    <div class="customer-page" style="margin-left: 15px; margin-top: 15px;">
        <!-- 搜索条件 -->
        <el-form :inline="true" :model="keyword" label-width="95px">
            <el-form-item label="工单号">
                <el-input v-model="keyword.orderNumber" placeholder="请输入完整工单号"></el-input>
            </el-form-item>
            <el-form-item label="业务性质">
                <el-select v-model="keyword.businessType" placeholder="请选择">
                    <el-option v-for="item in businessTypeList" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 30px;">
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" icon="el-icon-delete" @click="handleDleteBatch">删除</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain size="primary" @click="resetSearchForm('searchForm')"
                    icon="el-icon-refresh">重置</el-button>
            </el-form-item>
            <!-- <el-button type="primary" plain size="primary" @click="dialogExcelVisible = true"
                icon="el-icon-upload2">导入</el-button> -->
            <el-button type="primary" plain size="primary" @click="downloadExcel" icon="el-icon-download">导出</el-button>
        </el-form>

        <!-- 上传excel的对话框 -->
        <el-dialog title="上传工单信息Excel" :visible.sync="dialogExcelVisible" width="40%">
            <el-upload class="upload-demo" drag
                action="http://localhost:8081/workOrdersManagement/workOrders/upload/excel"
                accept=".xlsx,.xls" :on-success="uploadExcelSuccess" :on-error="uploadExcelError" multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传.xlsx或.xls文件, 且不超过500kb</div>
            </el-upload>
        </el-dialog>

        <!-- 数据表格 -->
        <el-table :data="tableData" tooltip-effect="dark" class="customer-table"
            @selection-change="handleSelectionChange" width="100%">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column label="序号" width="50">
                <template #default="scope">
                    {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
                </template>
            </el-table-column>
            <el-table-column prop="orderNumber" label="工单号" width="180" align="center"></el-table-column>
            <el-table-column prop="businessType" label="业务性质" width="200" align="center"></el-table-column>
            <el-table-column prop="orderTitle" label="工单标题" width="200" align="center"></el-table-column>
            <el-table-column prop="submissionTime" label="提交时间" width="120" align="center"></el-table-column>
            <el-table-column prop="submitter" label="提交者" width="180" align="center"></el-table-column>
            <el-table-column prop="handler" label="受理人员" width="200" align="center"></el-table-column>
            <el-table-column prop="orderStatus" label="工单状态" width="180" align="center"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button type="primary" size="small" icon="el-icon-edit"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total" class="pagination">
        </el-pagination>

        <!-- 编辑弹窗 -->
        <el-dialog :title="title" :visible.sync="editDialogVisible" width="50%">
            <el-form ref="editForm" :model="editForm" label-width="100px">
                <el-form-item label="工单编号">
                    <el-input v-model="editForm.orderNumber" placeholder="工单编号"></el-input>
                </el-form-item>
                <el-form-item label="业务性质">
                    <el-select v-model="editForm.businessType" placeholder="请选择">
                        <el-option v-for="item in businessTypeList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="工单标题">
                    <el-input v-model="editForm.orderTitle" placeholder="工单标题"></el-input>
                </el-form-item>
                <el-form-item label="提交时间">
                    <el-date-picker v-model="editForm.submissionTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="提交时间" />
                </el-form-item>
                <el-form-item label="提交者">
                    <el-input v-model="editForm.submitter" placeholder="提交者"></el-input>
                </el-form-item>
                <el-form-item label="受理人员">
                    <el-input v-model="editForm.handler" placeholder="受理人员"></el-input>
                </el-form-item>
                <el-form-item label="工单状态">
                    <el-select v-model="editForm.orderStatus" placeholder="请选择">
                        <el-option v-for="item in orderStatusList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="editFormSubmit">确定</el-button>
            <el-button type="default" @click="editDialogVisible = false">取消</el-button>
        </el-dialog>

        <!-- 编辑/新增弹窗 -->
        <el-dialog :title="title" :visible.sync="addDialogVisible" width="50%">
            <el-form ref="addForm" :model="addForm" label-width="100px">
                <el-form-item label="工单编号">
                    <el-input v-model="addForm.orderNumber" placeholder="工单编号不能为空"></el-input>
                </el-form-item>
                <el-form-item label="业务性质">
                    <el-select v-model="addForm.businessType" placeholder="请选择">
                        <el-option v-for="item in businessTypeList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="工单标题">
                    <el-input v-model="addForm.orderTitle" placeholder="工单标题"></el-input>
                </el-form-item>
                <el-form-item label="提交时间">
                    <el-date-picker v-model="addForm.submissionTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="提交时间" />
                </el-form-item>
                <el-form-item label="提交者">
                    <el-input v-model="addForm.submitter" placeholder="提交者不能为空"></el-input>
                </el-form-item>
                <el-form-item label="受理人员">
                    <el-input v-model="addForm.handler" placeholder="受理人员"></el-input>
                </el-form-item>
                <el-form-item label="工单状态">
                    <el-select v-model="addForm.orderStatus" placeholder="请选择">
                        <el-option v-for="item in orderStatusList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="addFormSubmit">确定</el-button>
            <el-button type="default" @click="addDialogVisible = false">取消</el-button>
        </el-dialog>
        

    </div>
</template>

<script>
import { getByParam, update, add, deleteBatch, deleteById, getType, getStatus } from '@/api/psm/workOrders';

export default {
    name: 'staffInfo',
    data() {
        return {
            // 数据表单信息
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // 搜索条件
            keyword: {
                orderNumber: '',
                businessType: ''
            },
            // 下拉框信息
            businessTypeList: [],
            orderStatusList: [],
            // 导入excel对话框
            dialogExcelVisible: false,
            // 批量删除
            ids: [],
            // 编辑/新增弹窗
            editDialogVisible: false,
            addDialogVisible: false,
            title: '',
            editForm: {
                orderNumber: '',
                businessType: '',
                orderTitle: '',
                submissionTime: '',
                submitter: '',
                handler: '',
                orderStatus: ''
            },
            addForm: {
                orderNumber: '',
                businessType: '',
                orderTitle: '',
                submissionTime: '',
                submitter: '',
                handler: '',
                orderStatus: ''
            },
        }
    },

    created() {
        this.currentPage = 1;
        this.fetchData();
    },

    methods: {
        // 初始化数据
        fetchData() {
            // 获取下拉框信息
            this.getInfo();
            // 传入搜索条件
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                orderNumber: this.keyword.orderNumber,
                businessType: this.keyword.businessType
            };
            // 获取列表数据
            getByParam(params).then(response => {
                console.log("staffInfo列表, response", response);
                this.tableData = response.data.list;
                this.total = response.data.total;

                // 更新 Imarkd
                this.updateImarkd();
            });
        },

        // 更新自增的 Imarkd
        updateImarkd() {
            this.tableData.forEach((item, index) => {
                this.$set(item, 'Imarkd', index + 1 + (this.currentPage - 1) * this.pageSize);
            });
        },

        // 删除的选中行
        handleSelectionChange(selectionRowArray) {
            this.ids = [];
            selectionRowArray.forEach(item => this.ids.push(item.id));
        },

        // 批量删除
        handleDleteBatch() {
            this.$confirm('确定删除选中的[' + this.ids + ']条数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBatch(this.ids).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.currentPage = 1;
                    this.fetchData(); // 更新表格数据
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 打开编辑弹窗
        handleEdit(index, row) {
            this.editForm = row;
            console.log("编辑, row", row);
            this.title = '编辑工单信息';
            this.getInfo(); // 传入下拉框信息
            this.editDialogVisible = true;
        },

        // 编辑弹窗提交
        editFormSubmit() {
            console.log("编辑, editForm", this.editForm);
            update(this.editForm).then(res => {
                console.log("编辑, res", res);
                this.$message({
                    type: 'success',
                    message: '编辑成功!'
                });
                this.editDialogVisible = false;
                this.fetchData(); // 更新数据
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: '编辑失败!'
                });
            });
        },

        // 开启新增弹窗
        handleAdd() {
            this.title = '新增工单信息';
            this.editForm = {}; // 清空表单数据
            this.getInfo(); // 传入下拉框信息
            this.addDialogVisible = true;
        },

        // 新增弹窗提交
        addFormSubmit() {
            // 检查工单编号和添加者不能为空
            if (!this.addForm.orderNumber) {
                this.$message({
                    type: 'error',
                    message: '工单编号不能为空!'
                });
                return;
            }
            if (!this.addForm.submitter) {
                this.$message({
                    type: 'error',
                    message: '添加者不能为空!'
                });
                return;
            }

            add(this.addForm).then(res => {
                console.log("新增, res", res);
                this.$message({
                    type: 'success',
                    message: '新增成功!'
                });
                this.addDialogVisible = false;
                this.fetchData(); // 更新数据
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: '新增失败!'
                });
            });
        },

        // 页面大小变化
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchData(); // 更新数据
        },

        // 页码变化
        handleCurrentChange(val) {
            this.currentPage = val;
            this.fetchData(); // 更新数据
        },

        // 搜索
        handleSearch() {
            this.fetchData(); // 更新数据
        },

        // 删除单行
        handleDelete(index, row) {
            console.log("删除, row", row);
            this.$confirm('确定删除编号为 ' + row.orderNumber + ' 的数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteById(row.id).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.currentPage = 1;
                    this.fetchData(); // 更新表格数据
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 上传excel文件, 上传成功后, 关闭对话框, 刷新页面数据
        uploadExcelSuccess() {
            this.$message({
                type: "success",
                message: "上传成功"
            })
            this.dialogExcelVisible = false;
            this.fetchData();
        },

        // 上传excel文件失败
        uploadExcelError(err) {
            this.$message({
                type: "error",
                message: err
            })
        },

        // 导出excel文件, 即点击导出按钮后打开的对话框时触发
        downloadExcel() {
            this.$confirm('确定要导出数据吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                window.location.href = "http://localhost:8081/workOrdersManagement/workOrders/download/excel"
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消导出数据！'
                })
            })
        },

        // 获取下拉框信息
        getInfo() {
            this.businessTypeList = []; // 清空下拉框信息
            this.orderStatusList = [];
            getType().then(response => {
                console.log("下拉框信息, response", response);
                for (let i = 0; i < response.data.length; i++) {
                    this.businessTypeList.push({
                        value: response.data[i].businessType,
                        label: response.data[i].businessType
                    });
                }
            });
            getStatus().then(response => {
                console.log("下拉框信息, response", response);
                for (let i = 0; i < response.data.length; i++) {
                    this.orderStatusList.push({
                        value: response.data[i].orderStatus,
                        label: response.data[i].orderStatus
                    });
                }
            });
        },

        // 重置搜索条件
        resetSearchForm() {
            this.keyword = {
                staffName: '',
                jobCategory: ''
            };
            this.fetchData(); // 更新表格数据
        },
    }
}
</script>

<style scoped>
.customer-page {
    margin: 15px 30px;
}

.customer-table {
    width: 100%;
}

.el-table-column {
    text-align: center;
    /* 使表格列内容居中 */
}
</style>
